<template>
  <div class="content_box">
    <div class="msg_box">
      <div class="img_box">
        <div>
          <p class="title">落地页封面</p>
          <p style="color:red;font-size:22rpx">尺寸：750*1450</p>
        </div>
        <div class="box" v-if="formData.img">
            <img @click="preview(formData.img)" :src="formData.img" alt="">
            <p class="close" @click="close">
              <van-icon name="cross" />
            </p>
          </div>
          <div class="up_img" @click="changeImg" v-else>
            <p class="icon"><van-icon size="30px" name="plus" /></p>
            <p>上传图片</p>
          </div>
      </div>
      <div class="box">
        <p class="title">活动名称</p>
        <p class="price">
          <input v-model.trim="formData.name" type="text" placeholder="请输入活动名称">
        </p>
      </div>
      <div class="box">
        <p class="title">领取数量</p>
        <p class="price">
          <input v-model.trim="formData.receiveNum" type="text" placeholder="请输入领取数量">
          <span>个</span>
        </p>
      </div>
      
      <div class="box">
        <p class="title">关联优惠券</p>
        <p class="price">
          <picker range-key="name" @change="typeChange" :range="couponList" >
          <div class="picker">
            {{couponName}}
            <van-icon name="arrow" />
          </div>
        </picker>
        </p>
      </div>
      
      <div class="box">
        <div>
          <p class="title">是否推荐</p>
          <p class="tips">*推荐后首页弹窗展示</p>
        </div>
        <div class="yj">
          <p 
          @click="clickStatus(index)" 
          :class="statusIndex == index?'on':''" 
          v-for="(item,index) in status_list" :key="index">{{item.label}}</p>
        </div>
      </div>
      <div class="img_box" v-if="statusIndex">
        <div>
          <p class="title">首页弹窗封面</p>
          <p style="color:red;font-size:22rpx">尺寸：656*958</p>
        </div>
        <div class="box" v-if="formData.popupImg">
            <img @click="preview1(formData.popupImg)" :src="formData.popupImg" alt="">
            <p class="close" @click="close1">
              <van-icon name="cross" />
            </p>
          </div>
          <div class="up_img" @click="changeImg1" v-else>
            <p class="icon"><van-icon size="30px" name="plus" /></p>
            <p>上传图片</p>
          </div>
      </div>
      <div class="box">
        <p class="title">上下架</p>
        <p class="price">
          <van-switch :checked="formData.checked" @change="switchChange" />
        </p>
      </div>
    </div>
    <div class="anniu_box">
      <van-button 
        @click="submit"
        :disabled="loading"
        :loading="loading" 
        :loading-text="formData.id?'修改中...':'新增中...'"
        type="primary"
        color="#3d98f7"
        custom-style="box-shadow: 0rpx 10rpx 20rpx #CEDBFA;border:none;width: 100%;height: 88rpx;line-height: 88rpx;background: #1E68FF;border-radius: 100rpx;text-align: center;color: #fff;font-size: 30rpx;"
      >{{formData.id?'立即修改':'立即新增'}}</van-button>
    </div>
  </div>
</template>
 
<script>
import { getToken,getRefreshToken } from "@/utils/auth";
import {
  addActivity,
  updateActivity,
  getHdById,
  getActivityCouponList
} from "@/api/index";
export default {
  components: {},
  data() {
    return {
      formData:{
        img:'',
        popupImg:'',
        name:'',
        receiveNum:'',
        checked:false,
        suggest:'0'
      },
      loading:false,
      param:{
        current:1,
        size:50,
        storeId:''
      },
      roomList:[],
      status_list:[
        {
          value:'0',
          label:'不推荐',
        },
        {
          value:'1',
          label:'推荐',
        },
      ],
      statusIndex:0,
      couponName:'请选择',
      couponList:[]
    };
  },
  onShow() {
  },

  methods: {

    // 上下架
    switchChange(e){
      console.log(e)
      this.formData.checked = e.mp.detail
      // if(e.mp.detail){
      //   this.formData.checked = false
      // }else{
      //   this.formData.checked = true
      // }
    },

    // 选择优惠券
    typeChange(e){
      console.log(e)
      let index = +e.mp.detail.value
      this.couponName = this.couponList[index].name
      this.formData.stuffId = this.couponList[index].id
    },

    // 优惠券列表
    getCoupon(){
      getActivityCouponList().then(res=>{
        if(res.statusCode == '00000'){
          this.couponList = res.data
        }
      })
    },

    // 是否推荐
    clickStatus(index){
      this.statusIndex = index
      this.formData.suggest = this.status_list[index].value
    },
    
    onChange(event) {
      console.log(event)
      this.formData.roomIds = event.mp.detail
    },

    // 图片预览-头像
    preview(img){
      console.log(img)
      wx.previewImage({
        current: img, // 图片的地址url
        urls: this.formData.img // 预览的地址url
      })
    },
    // 删除图片
    close(index){
      this.formData.img = ''
    },
    // 图片上传-落地页
    changeImg(){
      this.formData.img = ''
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success :(res)=>{
          wx.showLoading({title: '上传中...'})
          console.log(res)
          // tempFilePath可以作为img标签的src属性显示图片
          wx.uploadFile({
            url: 'https://gxegateway.jiuzhours.com/rich-sparrow-god/file/fileUpload',
            name: 'file',
            method: 'POST',
            filePath: res.tempFilePaths[0],
            header: {
              'Authorization': `Bearer ${getToken()}`,
              'refreshToken':getRefreshToken(),
            },
            formData: {
              file: res.tempFilePaths[0],
            },
            success: (res) => {
              this.$toast('上传成功！')
              let returnData = JSON.parse(res.data)
              this.formData.img = returnData.data
              console.log(this.formData.img)
            },
            fail: (err) => {
              console.log(err)
              this.$toast('上传失败，请重新上传！')
              wx.hideLoading()
            }
          })
          
        }
      })
    },


    /*===首页推荐===*/
    preview1(img){
      console.log(img)
      wx.previewImage({
        current: img, // 图片的地址url
        urls: this.formData.popupImg // 预览的地址url
      })
    },
    // 删除图片
    close1(index){
      this.formData.popupImg = ''
    },
    // 图片上传-落地页
    changeImg1(){
      this.formData.popupImg = ''
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success :(res)=>{
          wx.showLoading({title: '上传中...'})
          console.log(res)
          // tempFilePath可以作为img标签的src属性显示图片
          wx.uploadFile({
            url: 'https://gxegateway.jiuzhours.com/rich-sparrow-god/file/fileUpload',
            name: 'file',
            method: 'POST',
            filePath: res.tempFilePaths[0],
            header: {
              'Authorization': `Bearer ${getToken()}`,
              'refreshToken':getRefreshToken(),
            },
            formData: {
              file: res.tempFilePaths[0],
            },
            success: (res) => {
              this.$toast('上传成功！')
              let returnData = JSON.parse(res.data)
              this.formData.popupImg = returnData.data
              console.log(this.formData.popupImg)
            },
            fail: (err) => {
              console.log(err)
              this.$toast('上传失败，请重新上传！')
              wx.hideLoading()
            }
          })
          
        }
      })
    },

    // 回显
    getHuixian(id){
      let arr = []
      this.$showLoading('加载中...')
      getHdById({id}).then(res=>{
        if(res.statusCode == '00000'){
          this.formData = res.data
          if(res.data.status){
            this.formData.checked = true
          }else{
            this.formData.checked = false
          }
          // this.formData.roomIds = arr
          console.log(this.formData)
          wx.hideLoading()
        }else{
          wx.hideLoading()
        }
      })
    },

    // 提交
    submit(){
      if(this.formData.checked){
        this.formData.status = 1
      }else{
        this.formData.status = 0
      }
      console.log(this.formData)
      this.$showLoading(this.formData.id?'修改中...':'新增中...')
      this.loading = true
      let returnData = this.formData.id?updateActivity(this.formData):addActivity(this.formData)
      returnData.then(res=>{
        if(res.statusCode == '00000'){
          this.loading = false
          wx.navigateBack({
            delta: 1
          });
          wx.hideLoading()
          this.$toast(this.formData.id?'修改成功':'新增成功')
        }else{
          wx.hideLoading()
          this.loading = false
          this.$toast(res.message)
        }
      })
    },

  },
  onHide() {},
  onLoad(options) {
    console.log(options)
    this.getCoupon()
    this.param.storeId = options.storeId
    if(options.id){
      this.formData.id = options.id
      this.getHuixian(options.id)
    }else{
      delete this.formData.id
    }
  },
  onUnload() {
    this.statusIndex = 0
    this.formData = {
      
    }
  },
};
</script>

<style lang="scss" scoped>
.msg_box{
  margin:0 30rpx;
  .box{
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:28rpx;
    color:#222;
    border-bottom:1px solid #f5f5f5;
    .title{
      font-weight: 500;
      display: flex;
      align-items: center;
      span{
        display: inline-block;
        width: 30rpx;
        height: 30rpx;
        line-height: 30rpx;
        background: #1E68FF;
        border-radius: 50%;
        color:#fff;
        text-align: center;
        font-size:24rpx;
        margin-left:20rpx;
      }
    }
    .price{
      display: flex;
      align-items: center;
      input{
        text-align: right;
        margin-right:20rpx;
      }
    }
    .yj{
      display: flex;
      align-items: center;
      p{
        width: 140rpx;
        padding:8rpx 0;
        background: #F1F3F4;
        border-radius: 10rpx;
        font-size:28rpx;
        margin-right:30rpx;
        text-align: center;
      }
      .on{
        background: #1E68FF;
        color:#fff;
      }
      input{
        text-align: right;
        margin-right:20rpx;
        font-size:28rpx;
      }
      span{
        font-size:28rpx;
      }
    }
  }
}
.anniu_box{
  margin:50rpx 30rpx;
}
.img_box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom:1px solid #f5f5f5;
  padding:30rpx 0;
  .title{
    font-weight: 500;
    font-size: 28rpx;
    color: #222;
  }
  .box{
    display: inline-block;
    width: 150rpx;
    height: 150rpx;
    border-radius: 10rpx;
    position: relative;
    margin-right:30rpx;
    img{
      width: 100%;
      height: 100%;
      border-radius: 10rpx;
    }
    .close{
      position: absolute;
      top:-10rpx;
      right:-10rpx;
      width: 30rpx;
      height: 30rpx;
      background: #222;
      border-radius: 50%;
      font-size:20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color:#fff;
    }
  }
  .up_img{
    display: inline-block;
    width: 150rpx;
    height: 150rpx;
    background: #F5F7FB;
    border-radius: 10rpx;
    text-align: center;
    color:#666;
    font-size:26rpx;
    .icon{
      margin-top:20rpx;
      margin-bottom:10rpx;
    }
  }
}
</style>
